<template>
  <div>
    <a-form @submit="handleSubmit" :form="form">
      <a-card class="card" title="基本信息" :bordered="false">
        <a-form-item
          required
          label="抢购时间"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          extra="活动时间到期后活动自动下架"
        >
          <a-range-picker
            :allowClear="true"
            show-time
            format="YYYY-MM-DD HH:mm"
            v-decorator="['panic_buying_time', { rules: [{ required: true, message: '请选择抢购时间' }] }]"
            @change="handlePanicBuyingTimeChange"
          />
        </a-form-item>

        <a-form-item
          label="排序号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          help="手机端展示排序"
        >
          <a-input-number
            v-decorator="['sort_id', { initialValue: 1 }]"
            placeholder="请输入排序号"/>
        </a-form-item>

        <a-form-item
          label="类型"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          v-if="$route.query.copy"
        >
          <a-radio-group
            v-decorator="['type', { initialValue: this.formType }]">
            <a-radio :value="1">今日直播</a-radio>
            <a-radio :value="2">好评返团</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-card>

      <a-card
        class="card"
        title="规格信息 (SKU)"
        :bordered="false"
      >
        <a-form-item>
          <commodity-activity-sku
            v-decorator="['commodity', { initialValue: {selectedCommodityId: [], selectedCommodity: {}, sku: []}}]"
            @commodityChanged="handleCommodityChange"
          />
        </a-form-item>
      </a-card>

      <a-card class="card" title="销售信息" :bordered="false">
        <a-form-item
          label="活动名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            v-decorator="['name', {rules: [{ required: true, message: '请输入活动名称' }]}]"
            name="name"
            placeholder="请输入活动名称"/>
        </a-form-item>

        <a-form-item
          required
          label="商品主图"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <upload-pic
            :limit="5"
            tips="建议尺寸640 x 640 像素，"
            v-decorator="['main_attachment_ids', { rules: [{ required: true, message: '请上传商品主图' }], initialValue: [] }]"
          />
        </a-form-item>

        <a-form-item
          label="详情文字"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-textarea
            v-decorator="['desc', { }]"
            :rows="4"/>
        </a-form-item>

        <a-form-item
          required
          label="详情图片"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <upload-pic
            :limit="5"
            v-decorator="['detail_attachment_ids', { rules: [{ required: true, message: '请上传详情图片' }], initialValue: [] }]"
          />
        </a-form-item>

        <a-form-item
          label="活动标签"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <activity-label-selection
            v-decorator="['activity_label', { initialValue: null, rules: [{ required: true, message: '请选择活动标签' }] }]"
          />
        </a-form-item>

        <a-form-item
          label="运费"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input-number
            :min="0"
            v-decorator="['freight', {rules: [{ required: true, message: '请填写运费' }]}]"
          />
        </a-form-item>

        <a-form-item
          label="包邮条件"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-row type="flex">
            <a-col>
              <a-form-item>
                <a-select
                  style="width: 130px"
                  v-decorator="['free_shipping_minimal', { initialValue: 0, rules: [{ validator: validateFreeShippingMinimal }]}]"
                >
                  <a-select-option v-for="item in freeShippingConditionsAchieve" :key="item.value" :value="item.value">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col offset="1">
              <a-form-item>
                <a-select
                  style="width: 130px"
                  v-decorator="['free_shipping_maximum', { initialValue: 0, rules: [{ validator: validateFreeShippingMaximum }] }]"
                >
                  <a-select-option v-for="item in freeShippingConditionsLessThan" :key="item.value" :value="item.value">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>

        <a-form-item
          label="偏远地区运费"
          :labelCol="labelCol"
          :wrapperCol="{ span: 21 }"
        >
          <a-radio-group
            v-decorator="['remote_regions_freight', { initialValue: 2 }]">
            <a-radio :value="1">开启</a-radio>
            <a-radio :value="2">关闭</a-radio>
          </a-radio-group>

          <div v-if="form.getFieldValue('remote_regions_freight') === 1">
            <a-button type="link" @click="remoteRegionsFreightModalOpen">+ 添加偏远省份</a-button>
            <a-table
              rowKey="id"
              :columns="[{ title: '省份', dataIndex: 'provinces_cn' }, { title: '计费方式', dataIndex: 'billing_method_cn' }, { title: '操作', scopedSlots: { customRender: 'action' } }]"
              :data-source="remoteRegionsFreight"
            >
              <span slot="action" slot-scope="text, record">
                <template>
                  <a @click="handleRemoteRegionsFreightEdit(record)">编辑</a>
                  <a-divider type="vertical"/>
                  <a-popconfirm placement="top" @confirm="handleRemoteRegionsFreightDelete(record)">
                    <template slot="title">
                      确定要删除吗?
                    </template>
                    <a>删除</a>
                  </a-popconfirm>
                </template>
              </span>
            </a-table>
          </div>

          <!--设置偏远地区 modal-->
          <a-modal
            title="设置偏远地区"
            :visible="remoteRegionsFreightFormVisible"
            v-if="remoteRegionsFreightFormVisible"
            @ok="handleRemoteRegionsFreightFormOk"
            @cancel="handleRemoteRegionsFreightFormCancel"
          >
            <a-form
              ref="remote_regions_freight_form"
              :form="remoteRegionsFreightForm"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-form-item
                label="选择地区"
                :wrapper-col="{ span: 12 }"
              >
                <a-cascader
                  expand-trigger="hover"
                  :options="areaOptions"
                  change-on-select
                  allow-clear
                  :show-search="true"
                  placeholder=""
                  v-decorator="['provinces', { rules: [ { required: true, message: '请选择地区' }, { validator: validateDuplicateProvince } ] }]"
                />
              </a-form-item>

              <a-form-item
                label="计费方式"
                extra="请注意，偏远地区运费在商品基础运费上增加。"
              >
                <a-radio-group
                  v-decorator="['billing_method']">
                  <a-radio :value="1">按件</a-radio>
                  <a-radio :value="2">按订单</a-radio>
                </a-radio-group>

                <a-form-item
                  :wrapperCol="{ offset: 5 }"
                  v-if="remoteRegionsFreightForm.getFieldValue('billing_method') === 1"
                >
                  <a-row type="flex" justify="start" :gutter="[8, 8]">
                    <a-col>每件增加</a-col>
                    <a-col>
                      <a-input-number
                        :min="0"
                        v-decorator="['increase_amount', { rules: [ { required: true, message: '请填写金额' } ] }]"/>
                    </a-col>
                    <a-col>元</a-col>
                  </a-row>
                </a-form-item>

                <a-form-item
                  :wrapperCol="{ offset: 5 }"
                  v-if="remoteRegionsFreightForm.getFieldValue('billing_method') === 2"
                >
                  <a-row type="flex" justify="start" :gutter="[8, 8]">
                    <a-col>当前订单增加</a-col>
                    <a-col>
                      <a-input-number
                        :min="0"
                        v-decorator="['increase_amount', { rules: [ { required: true, message: '请填写金额' } ] }]"/>
                    </a-col>
                    <a-col>元</a-col>
                  </a-row>
                </a-form-item>
              </a-form-item>
            </a-form>
          </a-modal>
        </a-form-item>

        <a-form-item
          label="售后截止时间"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-date-picker
            v-decorator="['after_sale_deadline', {rules: [{ required: true, message: '请选择售后截止时间' }]}]"
          />
        </a-form-item>

        <a-form-item
          label="预计发货时间"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-date-picker
            format="YYYY-MM-DD HH:mm"
            showTime
            v-decorator="['estimated_delivery_time', {rules: [{ required: true, message: '请选择预计发货时间' }]}]"
          />
        </a-form-item>

        <a-form-item
          label="是否上架"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group
            v-decorator="['status', { initialValue: 2 }]">
            <a-radio :value="2">下架</a-radio>
            <a-radio :value="1">上架</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          label="是否激活"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group
            v-decorator="['locking', { initialValue: 1 }]">
            <a-radio :value="1">激活</a-radio>
            <a-radio :value="2">锁定</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          label="同一地址限购数量"
          extra="0表示不限制"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input-number
            :min="0"
            v-decorator="['address_purchase_restriction', { initialValue: 0 }]"
          />
        </a-form-item>
      </a-card>

      <footer-tool-bar
        :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}">
        <a-button htmlType="submit" type="primary" :loading="loading">保存</a-button>
      </footer-tool-bar>
    </a-form>
  </div>
</template>

<script>
  import FooterToolBar from '@/components/FooterToolbar'
  import { mixin, mixinDevice } from '@/utils/mixin'
  import SupplierSelect from '@/components/SupplierSelect/SupplierSelect'
  import UploadPic from '@/components/UploadPic/UploadPic'
  import CommodityCategorySelection from '@/components/CommodityCategorySelection/CommodityCategorySelection'
  import ActivityLabelSelection from '@/components/ActivityLabelSelection/ActivityLabelSelection'
  import CommoditySelection from '@/components/CommoditySelection/CommoditySelection'
  import CommodityActivitySku from '@/components/CommodityActivitySku/CommodityActivitySku'
  import { getCommodityActivity, saveCommodityActivity } from '@/api/commodity'
  import moment from 'moment'
  import clonedeep from 'lodash.clonedeep'
  import { find, pick } from 'lodash'
  import provinces from 'china-division/dist/provinces.json'

  export default {
    name: 'Form',
    mixins: [mixin, mixinDevice],
    components: {
      CommodityActivitySku,
      CommoditySelection,
      ActivityLabelSelection,
      CommodityCategorySelection,
      UploadPic,
      SupplierSelect,
      FooterToolBar
    },
    computed: {
      freeShippingConditionsAchieve () {
        var freeShippingConditionsAchieve = [{ value: 0, name: '不限制最小数' }]
        for (let number = 1; number <= 10; number++) {
          freeShippingConditionsAchieve.push({ value: number, name: `满 ${number} 件包邮` })
        }
        return freeShippingConditionsAchieve
      },
      freeShippingConditionsLessThan () {
        var freeShippingConditionsAchieve = [{ value: 0, name: '不限制最大数' }]
        for (let number = 1; number <= 10; number++) {
          freeShippingConditionsAchieve.push({ value: number, name: `小于 ${number} 件包邮` })
        }
        return freeShippingConditionsAchieve
      }
    },
    data () {
      return {
        labelCol: {
          xs: { span: 3 },
          sm: { span: 3 }
        },
        wrapperCol: {
          xs: { span: 12 },
          sm: { span: 12 }
        },
        form: this.$form.createForm(this),

        batchSettingExtendedButtonVisible: true,
        batchSettingExtendedInputRef: '',

        skuSpecificationLimit: 2,
        skuSpecificationInputVisible: [],
        skuSpecification: [],
        skuSpecificationDetail: {},
        skuSpecificationDetailInputValue: '',
        skuSpecificationDetailExtendedInputValues: [],
        loading: false,

        skuSpecificationDetailTableValue: [],
        formType: 1, // 1: 今日直播 2: 好评返团
        isCopy: false,
        remoteRegionsFreight: [],
        remoteRegionsFreightForm: this.$form.createForm(this),
        remoteRegionsFreightFormVisible: false,
        isRemoteRegionsFreightFormEdit: false,
        remoteRegionsFreightFormEditId: null,

        areaOptions: provinces.map(province => ({
          label: province.name,
          value: province.code
        }))
      }
    },
    created () {
      this.formType = parseInt(this.$route.query.formType || 1) // 当前 form 类型
      this.isCopy = this.$route.query.hasOwnProperty('copy')

      if (this.$route.params.id) {
        // 编辑 / 复制
        getCommodityActivity(this.$route.params.id).then(res => {
          const commodityInfo = res

          // 初始化表单
          this.form.setFieldsValue({
            panic_buying_time: [moment(res.panic_buying_start_time), moment(res.panic_buying_end_time)],
            sort_id: res.sort_id,
            main_attachment_ids: res.attachments.filter(att => att.pivot.type === 1).map(att => {
              return {
                response: {
                  url: att.url,
                  id: att.id
                },
                mime_type: att.mime_type || '',
                name: att.id.toString(),
                url: att.url,
                uid: att.id
              }
            }),
            detail_attachment_ids: res.attachments.filter(att => att.pivot.type === 2).map(att => {
              return {
                response: {
                  url: att.url,
                  id: att.id
                },
                mime_type: att.mime_type || '',
                name: att.id.toString(),
                url: att.url,
                uid: att.id
              }
            }),
            commodity: {
              selectedCommodityId: [commodityInfo.commodity_id], // 默认选中的商品
              selectedCommodity: commodityInfo,
              sku: commodityInfo.skus,
              isEdit: true // 这里传个值, 用于 CommodityActivitySku 组件内部区分传入的数据是否是编辑
            },
            name: res.name,
            desc: res.desc,
            activity_label: (res.labels[0] && res.labels[0].id) || null,
            freight: res.freight / 100,
            free_shipping_maximum: res.free_shipping_maximum || 0,
            free_shipping_minimal: res.free_shipping_minimal || 0,
            estimated_delivery_time: moment(res.estimated_delivery_time),
            after_sale_deadline: moment(res.after_sale_deadline),
            status: res.status,
            locking: res.locking,
            address_purchase_restriction: res.address_purchase_restriction,
            remote_regions_freight: res.remote_regions_freight
          })
          // 不是 copy 的情况下, formType 取商品返回类型
          !this.isCopy && (this.formType = res.type)

          // 初始化偏远地区表单设置
          res.remote_regions_freight_setting.forEach(setting => {
            const _provinces = provinces.filter(p => parseInt(p.code) === parseInt(setting.provinces))[0]
            const billingMethod = { 1: '按件: 每件增加', 2: '按单: 每单增加' }
            const increaseAmount = setting.increase_amount / 100 // 后端单位 分,这里展示需要除以 100

            this.remoteRegionsFreight.push({
              id: Math.random().toString(32).substring(2),
              provinces_cn: _provinces.name,
              provinces: _provinces.code,
              billing_method_cn: billingMethod[setting.billing_method] + increaseAmount + '元',
              billing_method: setting.billing_method,
              increase_amount: increaseAmount
            })
          })
        })
      } else {
        // 创建
        // 初始化开始结束时间
        this.$nextTick(_ => {
          this.form.setFieldsValue({
            panic_buying_time: [
              moment().startOf('day'),
              this.formType === 1
                ? moment().add(1, 'day').set('hours', 10).set('minutes', 30).set('seconds', 0)
                : moment().add(1, 'day').set('hours', 10).set('minutes', 0).set('seconds', 0)
            ]
          })
        })
      }
    },
    methods: {
      handleSubmit (e) {
        e.preventDefault()
        this.loading = true

        this.form.validateFields((err, values) => {
          if (err) {
            this.loading = false
            return
          }

          // 有 id => 是编辑, copy 是复制(不带有 id)
          if (this.$route.params.id && !this.isCopy) {
            values.id = this.$route.params.id
          }
          // 规整偏远地区设置
          const remoteRegionsFreight = clonedeep(this.remoteRegionsFreight)
          remoteRegionsFreight.forEach((item, index) => {
            const temp = pick(item, ['billing_method', 'increase_amount', 'provinces'])
            temp.increase_amount *= 100 // 后端单位 分
            temp.provinces = parseInt(temp.provinces) // 后端单位 分
            remoteRegionsFreight[index] = temp
          })

          values.commodity_id = values.commodity.selectedCommodityId[0]
          values.sku = []
          values.commodity.sku.forEach(item => {
            var itemTemp = clonedeep(item)
            // 把价格格式化为 分, 这里不需要格式化 入仓和进仓价
            itemTemp.strongman_price = itemTemp.strongman_price * 100
            itemTemp.elite_price = itemTemp.elite_price * 100
            itemTemp.group_owner_price = itemTemp.group_owner_price * 100
            itemTemp.external_guide_price = itemTemp.external_guide_price * 100
            itemTemp.direct_invitation = itemTemp.direct_invitation * 100
            itemTemp.indirect_invitation = itemTemp.indirect_invitation * 100
            values.sku.push(itemTemp)
          })

          if (this.isCopy) {
            values.copied_from = this.$route.params.id // 提交复制来源
          } else {
            // 不是复制, 类型取 formType, 复制的话根据 form 表单里的 type 来
            values.type = this.formType
          }
          values.freight = values.freight * 100
          values.main_attachment_ids = values.main_attachment_ids.map(att => att.response.id)
          values.detail_attachment_ids = values.detail_attachment_ids.map(att => att.response.id)
          values.after_sale_deadline = values.after_sale_deadline.format('YYYY-MM-DD')
          values.estimated_delivery_time = values.estimated_delivery_time.format('YYYY-MM-DD HH:mm')
          values.panic_buying_start_time = values.panic_buying_time[0].format('YYYY-MM-DD HH:mm')
          values.panic_buying_end_time = values.panic_buying_time[1].format('YYYY-MM-DD HH:mm')
          values.remote_regions_freight_setting = remoteRegionsFreight

          saveCommodityActivity(values)
            .then(res => {
              this.$message.success('保存成功!')
              this.$router.push({ name: values.type === 1 ? 'commodity_activity_live_today_list' : 'commodity_activity_praise_return_list' })
            })
            .finally(_ => {
              this.loading = false
            })
        })
      },
      handleCommodityChange (value) {
        if (!this.$route.params.id) {
          this.form.setFieldsValue({
            main_attachment_ids: value.attachments.map(
              item => {
                return {
                  url: item.url,
                  response: { id: item.id, url: item.url },
                  mime_type: item.mime_type || '',
                  uid: item.id,
                  name: item.id.toString()
                }
              }),
            // 创建的情况下, 才设置名称
            name: value.name || ''
          })
        } else {
          this.form.setFieldsValue({
            main_attachment_ids: value.attachments.map(
              item => {
                return {
                  url: item.url,
                  response: { id: item.id, url: item.url },
                  mime_type: item.mime_type || '',
                  uid: item.id,
                  name: item.id.toString()
                }
              })
          })
        }
      },
      validateFreeShippingMinimal (rule, value, callback) {
        new Promise((resolve, reject) => {
          if (value === 0) {
            return resolve()
          }

          const freeShippingMaximum = this.form.getFieldValue('free_shipping_maximum')
          if (freeShippingMaximum > 0 && freeShippingMaximum <= value) {
            reject(new Error('限制最小数不能≥限制最大数'))
          }

          resolve()
        }).then(_ => {
          callback()
        }).catch(err => {
          callback(err)
        }).finally(_ => {
          this.form.validateFields(['free_shipping_maximum'])
        })
      },
      validateFreeShippingMaximum (rule, value, callback) {
        new Promise((resolve, reject) => {
          if (value === 0) {
            return resolve()
          }

          const freeShippingMinimal = this.form.getFieldValue('free_shipping_minimal')
          if (freeShippingMinimal > 0 && freeShippingMinimal >= value) {
            reject(new Error('限制最大数不能≤限制最小数'))
          }

          resolve()
        }).then(_ => {
          callback()
        }).catch(err => {
          callback(err)
        }).finally(_ => {
          this.form.validateFields(['free_shipping_minimal'])
        })
      },
      /**
       * @param date
       * @param dateString
       */
      handlePanicBuyingTimeChange (date, dateString) {
        const startTime = clonedeep(date[0]) // 抢购开始时间
        this.form.setFieldsValue({ 'after_sale_deadline': startTime.add(1, 'M') })
        const endTime = clonedeep(date[1]) // 抢购结束时间
        this.form.setFieldsValue({
          'estimated_delivery_time': endTime.add(1, 'd').set({
            hours: 9,
            minutes: 0,
            seconds: 0
          })
        })
      },

      /**
       * 偏远地区 新增/编辑 确认
       */
      handleRemoteRegionsFreightFormOk (e) {
        e.preventDefault()

        this.$refs.remote_regions_freight_form.form.validateFields((err, values) => {
          if (err === null) {
            const _provinces = provinces.filter(p => parseInt(p.code) === parseInt(values.provinces[0]))[0]
            const billingMethod = { 1: '按件: 每件增加', 2: '按单: 每单增加' }

            // 如果是编辑情况下的
            if (this.isRemoteRegionsFreightFormEdit) {
              this.remoteRegionsFreight.forEach(item => {
                if (item.id === this.remoteRegionsFreightFormEditId) {
                  item = Object.assign(item, {
                    provinces_cn: _provinces.name,
                    provinces: _provinces.code,
                    billing_method_cn: billingMethod[values.billing_method] + values.increase_amount + '元',
                    billing_method: values.billing_method,
                    increase_amount: values.increase_amount
                  })
                }
              })
            } else {
              this.remoteRegionsFreight.push({
                id: Math.random().toString(32).substring(2),
                provinces_cn: _provinces.name,
                provinces: _provinces.code,
                billing_method_cn: billingMethod[values.billing_method] + values.increase_amount + '元',
                billing_method: values.billing_method,
                increase_amount: values.increase_amount
              })
            }

            this.handleRemoteRegionsFreightFormCancel()
          }
        })
      },
      /**
       * 偏远地区 取消
       */
      handleRemoteRegionsFreightFormCancel () {
        this.remoteRegionsFreightFormVisible = false
        this.isRemoteRegionsFreightFormEdit = false
        this.remoteRegionsFreightFormEditId = null
      },
      /**
       * 打开 偏远地区 modal
       */
      remoteRegionsFreightModalOpen () {
        this.remoteRegionsFreightFormVisible = true
        this.$nextTick(_ => this.remoteRegionsFreightForm.setFieldsValue({ billing_method: 1 })) // 这里单独赋默认值, 不然根据 billing_method 的初始化没法出来
      },
      /**
       * 偏远地区编辑
       */
      handleRemoteRegionsFreightEdit (record) {
        this.remoteRegionsFreightFormVisible = true
        this.isRemoteRegionsFreightFormEdit = true
        this.remoteRegionsFreightFormEditId = record.id

        this.$nextTick(_ => {
          this.$refs.remote_regions_freight_form.form.setFieldsValue({
            provinces: [record.provinces],
            billing_method: record.billing_method
          })
          // 等 billing_method 处理完后, 渲染出 Input 再载入金额
          this.$nextTick(_ => {
            this.$refs.remote_regions_freight_form.form.setFieldsValue({
              increase_amount: record.increase_amount
            })
          })
        })
      },
      /**
       * 删除偏远地区
       */
      handleRemoteRegionsFreightDelete (record) {
        this.remoteRegionsFreight = this.remoteRegionsFreight.filter(item => item.id !== record.id) // 剔除现有的
      },
      /**
       * 校验是否重复添加地区
       * @param rule
       * @param value
       * @param callback
       */
      validateDuplicateProvince (rule, value, callback) {
        const existReomoteRegionsFreight = find(this.remoteRegionsFreight, { provinces: value[0] })
        if (existReomoteRegionsFreight) {
          // 在编辑情况下, 如果是当前编辑的 id 则允许
          if (this.isRemoteRegionsFreightFormEdit && (this.remoteRegionsFreightFormEditId === existReomoteRegionsFreight.id)) {
            callback()
          }
          callback(new Error('不可重复新增地区'))
        }

        callback()
      }
    }
  }
</script>

<style lang="less" scoped>
  .card {
    margin-bottom: 24px;

    &:last-child {
      margin-bottom: 80px;
    }
  }

  .dynamic-delete-button {
    cursor: pointer;
    position: relative;
    top: 4px;
    font-size: 24px;
    color: #999;
    transition: all 0.3s;
  }

  .dynamic-delete-button:hover {
    color: #777;
  }

  .dynamic-delete-button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
</style>
